<template>
  <div class="auxiliary-list-create">
    <createTop firstMenu="辅件管理" secondMenu="辅件列表" title="添加/编辑"></createTop>

    <el-card shadow="always" v-loading="loading">
      <div class="content">
        <div class="se">
          <div class="content-title">名称 <span class="red-icon">※</span></div>
          <el-input :style="{'width':'350px'}" v-model="material_name" placeholder="请输入名称"></el-input>
        </div>
        <div class="se">
          <div class="content-title">编号</div>
          <el-input :style="{'width':'350px'}" disabled v-model="number" :rows="5" resize="none" placeholder="系统自动生成"></el-input>
        </div>
      </div>
      <div class="content">
        <div class="se">
          <div class="content-title">单位 <span class="red-icon">※</span></div>
          <el-input :style="{'width':'350px'}" align="left" v-model="unit" placeholder="请输入编号"></el-input>
        </div>

      </div>
    </el-card>
    <el-card class="add-wrap" :style="{'marginTop':'15px'}">
        <div slot="header" class="card-title">
          <div class="left">规格 <span class="red-icon">※</span></div>
        </div>
      <el-table
      :data="tableData"
      style="width: 100%"
      :fit="true"
      :stripe="true"
      size="mini"
      align="center">
      
      <el-table-column 
      label="规格名称"
      min-width="110"
      align="center">
        <template slot-scope="scope">
          <el-input 
          v-model="scope.row.format_name" 
          placeholder="输入规格名称"></el-input>
        </template>
      </el-table-column>
      
      <el-table-column 
      label="上限预警"
      min-width="110"
      align="center">
        <template slot-scope="scope">
          <el-input 
          v-model="scope.row.max" 
          placeholder="输入上限预警数量"></el-input>
        </template>
      </el-table-column>
      
      <el-table-column 
      label="下限预警"
      min-width="110"
      align="center">
        <template slot-scope="scope">
          <el-input 
          v-model="scope.row.min" 
          placeholder="输入下限预警数量"></el-input>
        </template>
      </el-table-column>

      <el-table-column label="操作"
      min-width="140"
      align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            plain
            type="danger"
            @click="del(scope.$index,scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
      <el-button
      class="add-type"
      size="mini"
      plain
      type="primary"
      @click="add">增加规格类型</el-button>
    </el-card>

    <el-button
      size="small"
      type="primary"
      class="confirms"
      :style="{'width':'80px'}"
      @click="save">保 存</el-button>

  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import createTop from '@/components/createTop.vue';
import saveBtn from '@/components/saveBtn.vue';
import ajaxResquest from '@/api/apiRequest';

@Component({
  components: {
    createTop,
    saveBtn
  }
})
export default class AuxiliaryListCeate extends Vue {
  pageName: string = '';
  secondMenu: string = '';
  // rolesRes!: ajaxResquest;
  createRes!: ajaxResquest;
  infoRes!: ajaxResquest;
  delRes!: ajaxResquest;
  roles: any[] = [];
  role: string = '';

  material_name: string = '';
  unit: string = '';
  number: string = '';

  loading: boolean = false;
  checkList: any[] = [];
  id!: string;
  tableData: any = [];
  mounted() {
    this.delRes = new ajaxResquest('/auxiliaryparts/delAuxiliaryPartsFormats');
    if (this.$route.query.edit) {
      this.pageName = '编辑分类';
      this.id = this.$route.query.id;
      this.infoRes = new ajaxResquest('/auxiliaryparts/getAuxiliaryPartsInfo');
      this.getInfo();
    } else {
      this.pageName = '新增分类';
    }
    this.createRes = new ajaxResquest(
      '/auxiliaryparts/auxiliaryPartsAddUpdateToDo'
    );
  }
  getInfo(): void {
    this.infoRes.getFunction({ auxiliaryPartsId: this.id }).then((res: any) => {
      console.log(res);
      if (res.data.code === 1) {
        this.unit = res.data.data.auxiliaryPartsInfo[0].unit;
        this.number = res.data.data.auxiliaryPartsInfo[0].number;
        this.material_name =
          res.data.data.auxiliaryPartsInfo[0].auxiliary_parts_name;
        this.tableData = res.data.data.formats;
      }
    });
  }
  add() {
    this.tableData.push({ name: '', max: '', min: '', new: true });
  }
  del(index: number, val: any) {
    if (val.new) {
      this.tableData.splice(index, 1);
    } else {
      this.delRes.getFunction({ formatsId: val.id }).then((res: any) => {
        if (res.data.code === 1) {
          this.tableData.splice(index, 1);
        }
      });
    }
  }
  save(): void {
    let temp: any[] = [];
    this.tableData.forEach((e: any) => {
      // if (!this.$route.query.edit) {
      let s = {
        formatId: e.id ? e.id : '',
        formatName: e.format_name,
        max: e.max,
        min: e.min
      };
      temp.push(s);
      // } else {

      // }
    });
    let data: any = {
      formatsInfo: JSON.stringify(temp),
      auxiliary_parts_name: this.material_name,
      unit: this.unit
    };
    if (this.$route.query.id) {
      data = { ...data, auxiliaryPartsId: this.$route.query.id };
    }
    this.createRes.getFunction(data).then((res: any) => {
      if (res.data.code === 1) {
        this.$to('auxiliaryList');
      }
    });
  }
}
</script>
<style lang="less">
.auxiliary-list-create {
  height: 100%;
  padding: 15px;
  display: flex;
  flex-direction: column;
  z-index: 101;
  box-sizing: border-box;
  .el-card {
    overflow-y: auto;
  }
  .content {
    font-size: 16px;
    background-color: #fff;
    border-radius: 4px;
    .content-title {
      height: 40px;
      margin-top: 20px;
      line-height: 2;
      text-align: left;
    }
    .short-input {
      width: 100%;
      width: 240px;
      margin-right: 10px;
    }
    .el-upload-list__item {
      width: 350px;
    }
    .el-textarea {
      margin-bottom: 30px;
    }
  }
  .checkbox {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .el-checkbox {
    margin: 2px 0 !important;
    width: 130px;
  }
  .add-type {
    margin-top: 15px;
  }
  .add-wrap {
    text-align: left;
  }
  .confirms {
    margin-top: 15px;
  }
}
</style>
